import * as React from "react";
import { navigateBack, redirectTo, request, View } from "remax/wechat";
import { useQuery } from "remax";
import { usePageEvent } from "remax/macro";
import { origin } from "@/config/config";
import { Card, SearchBar, Tabs } from "annar";
import { LongScrollView } from "@/component/long-scroll-view";
import { Video } from "@/type/video";

const { TabContent } = Tabs;

const tabs = [
  {
    key: "0",
    title: "全部",
  },
  {
    key: "1",
    title: "最热",
  },
];

export default () => {
  const [stateKey, setStateKey] = React.useState("0");
  const [keyword, setKeyword] = React.useState("");
  const [videoList, setVideoList] = React.useState<Video[]>([]);
  const query: { aim: string; param: string } = useQuery();
  console.log(query);

  const search = () => {
    if (query.aim === "category") {
      request({
        url: `${origin}/video/videoList/1/10?categoryLabel=${query.param}`,
        success: (res) => {
          console.log(res);
          let data = res.data.data.rows;
          setVideoList(data);
        },
      }).then(() => {
        setKeyword(query.param);
      });
    } else {
      request({
        url: `${origin}/video/videoList/1/10?keyword=${query.param}`,
        success: (res) => {
          console.log(res);
          let data = res.data.data.rows;
          setVideoList(data);
        },
      });
    }
  };

  usePageEvent("onLoad", () => {
    search();
  });
  return (
    <View>
      <SearchBar
        style={{ margin: "0 10px" }}
        placeholder="搜索"
        onFocus={() => {
          redirectTo({
            url: "/pages/search/index",
          });
        }}
        onInput={(v) => {
          setKeyword(v);
        }}
        value={keyword}
      />

      <View style={{ height: "10px" }} />

      <Tabs
        // fixed
        onTabClick={({ key }) => {
          // if (key.key )
          setStateKey(key);
          console.log(stateKey);
          if (stateKey === "1") {
            request({
              url: `${origin}/video/hotVideoList/1/10`,
              success: (res) => {
                setVideoList(res.data.data);
              },
            });
          } else {
            search();
          }
        }}
        activeKey={stateKey}
      >
        {tabs.map((tab) => (
          <TabContent key={tab.key} tab={tab.title}>
            <Card>
              <View style={{ height: "10px", background: "lightgrey" }} />
              <LongScrollView data={videoList} />
            </Card>
            {}
          </TabContent>
        ))}
      </Tabs>
    </View>
  );
};
